<!--
*@payItBack 还钱页面
*@author lijiaqi
*@date 2023/10/17 11:20
-->
<template>
  <div class="pageBox">
    <!--    头部-->
    <x-header :left-options="{backText: ''}">还钱</x-header>
    <!--    内容部分-->
    <div class="content_box">
      <!--      -->
      <div class="item_box">
        <!--        第一步-->
        <div class="one_box">
          <div class="box_title">
            <p>合计应还款（元）</p>
          </div>
          <p class="money_num">22,000.00</p>
          <div class="info_box">
            <p>合同号：<span>00001</span></p>
            <p>贷款到期日：<span>2023-07-15</span></p>
          </div>
          <!--        借据部分  -->
          <div class="jj_box">
            <checklist title="" :options="inlineDescList" v-model="inlineDescListValue" @on-change="change"></checklist>
            <!--            <div class="jj_item">-->
            <!--              <div class="item_left">-->

            <!--              </div>-->
            <!--              <div class="item_right">-->
            <!--                <p>借据号1:A00001</p>-->
            <!--                <p>-->
            <!--                  <span>结欠本金：10,000.00</span>-->
            <!--                  <span>结欠利息：1,000.00</span>-->
            <!--                </p>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </div>
      </div>
      <!--    按钮    -->
      <div class="button_box">
        <div class="but_item" @click="toPayMoney()">
          <p>提前还款</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Checklist} from 'vux'

export default {
  name: "payItBack",
  props: {},
  components: {Checklist},
  data() {
    return {
      inlineDescList: [
        {key: '1', value: '借据号1：A00001', inlineDesc: '结欠本金：10,000.00  结欠利息：1,000.00'},
      ],
      inlineDescListValue: [],
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 去还钱
     */
    toPayMoney() {
      this.$router.push("/refinance/repaymentConfirmation");
    },
    change(val, label) {
      console.log('change', val, label)
    },
  }
}
</script>

<style lang="less" scoped>
.pageBox {
  min-height: 100vh;
  //中间内容部分
  .content_box {
    width: 100%;
    margin-top: 16px;

    .item_box {
      height: 100%;
      width: 100%;
      background-color: #FFFFFF;

      .one_box {
        padding: 14px;

        .box_title {
          text-align: left;
          color: #a9a4a4;
        }

        .money_num {
          font-weight: bolder;
          font-size: 17px;
          margin: 5px 0;
        }

        .info_box {
          display: flex;
          align-items: center;
          justify-content: flex-start;

          p:first-child {
            margin-right: 15px;
          }
        }

        //  借据部分
        .jj_box {
          margin-top: 15px;

          .jj_item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 10px 0;
            background-color: yellow;

            .item_left {
              width: 20%;
            }

            .item_right {

            }
          }
        }
      }
    }

    //按钮部分
    .button_box {
      width: 100%;
      margin-top: 70px;

      .but_item {
        margin: 0 10px;
        padding: 10px 0px;
        //width: 90%;
        //margin: 0 auto;
        background-color: #ff4a32;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          color: white;
          font-size: 16px;
        }
      }
    }
  }

  /deep/ .weui-cell {
    margin: 0;
    padding: 10px 0;
  }

  /deep/ .weui-cells:last-child:after {
    border-bottom: 0;
  }
}

</style>
